.mobile-header {
  display: none;
  position: fixed;
  z-index: 2;
  top: 0;
  width: 100%;
  height: 50px;
  .mobile-nav {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: $header-background;
    box-shadow: $header-shadow;
    text-align: center;
    .mobile-nav-icon {
      width: 50px;
      height: 50px;
      float: left;
      position: relative;
      span {
        position: absolute;
        left: 15px;
        top: 25px;
        width: 20px;
        height: 1px;
        background: $theme-color-base;
        &:nth-child(1) {
          transform: translateY(-6px);
        }
        &:nth-child(3) {
          transform: translateY(6px);
        }
      }
    }
    .mobile-nav-title {
      display: inline-block;
      height: 100%;
      line-height: 50px;
      margin-right: 50px;
      font-family: $mobile-header-font;
      font-size: 24px;
    }
    .mobile-nav-title-link {
      color: white;
      opacity: 0.7;
    }
  }
  .mobile-menu {
    display: none;
    position: fixed;
    top: 50px;
    width: 100%;
    background: white;
    box-shadow: 0 2px 2px #cacaca;
    .mobile-menu-list {
      list-style: none;
      margin: 20px 0;
      padding-left: 30px;
    }
    .mobile-menu-item {
      text-align: left;
      margin: 10px 0;
      font-size: 15px;
      color: $dark-gray;
    }
    .mobile-menu-item > .iconfont {
      padding-right: 5px;
    }
  }
  .mobile-menu.show-menu {
    animation: showMenu 0.4s forwards;
    display: block;
  }
  .mobile-menu.hide-menu {
    animation: hideMenu 0.4s forwards;
    display: block;
    transform: translateY(0);
  }
}

.mobile-nav-icon.show-menu {
  span {
    &:nth-child(1) {
      animation: first-icon-open 0.4s both;
    }
    &:nth-child(2) {
      display: none;
    }
    &:nth-child(3) {
      animation: third-icon-open 0.4s both;
    }
  }
}
.mobile-nav-icon.hide-menu {
  span {
    &:nth-child(1) {
      animation: first-icon-close 0.4s both;
    }
    &:nth-child(2) {
      display: block;
    }
    &:nth-child(3) {
      animation: third-icon-close 0.4s both;
    }
  }
}

// ======== animation keyframes =======
// == mobile-nav-icon ==
@keyframes first-icon-open {
  from {
    transform: rotate(0) translateY(-6px);
  }
  to {
    transform: rotate(45deg) translateY(0);
  }
}

@keyframes first-icon-close {
  from {
    transform: rotate(45deg) translateY(0);
  }
  to {
    transform: rotate(0) translateY(-6px);
  }
}

@keyframes third-icon-open {
  from {
    transform: rotate(0) translateY(6px);
  }
  to {
    transform: rotate(-45deg) translateY(0);
  }
}

@keyframes third-icon-close {
  from {
    transform: rotate(-45deg) translateY(0);
  }
  to {
    transform: rotate(0) translateY(6px);
  }
}

// == mobile-menu ==
@keyframes showMenu {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hideMenu {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(-100%);
  }
}

@include max-screen() {
  .mobile-header {
    display: block;
  }
}